function changeDom(that, flag = false) {
    const spans = document.querySelectorAll('span')
    for (const item of spans) {
        const key = item.getAttribute('v-band')
        const [key1, key2] = key.split('.')
        if (!key2) {
            item.innerHTML = that[key1]
        } else {
            item.innerHTML = that[key1][key2]
        }
    }
    if (!flag) return
    const btns = document.querySelectorAll('button')
    for (const item of btns) {
        const eventInfo = item.getAttribute('v-no')
        const [eventType, eventFuncName] = eventInfo.split(':')
        item.addEventListener(eventType, that[eventFuncName].bind(that))
    }
}

function VUE(config) {
    const data = config.data()
    let assist = { ...data }
    const that = {
        ...data,
        ...config,
        ...config.methods
    }
    for (const key in data) {
        Object.defineProperty(that, key, {
            set(value) {
                that.beforeCreate()
                assist[key] = value
                changeDom(that)
                that.created()
            },
            get() {
                return assist[key]
            }
        })
    }
    changeDom(that, true)
}

